<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>v-for进阶使用</h2>
    <ul>
        <li>
            <h3>v-for和v-if不能在同一个标签中使用。（这个是Vue-Cli要求，目前我们最好就这样严格要求）</h3>
            <h4>解决方案</h4>
            <ol>
                <li>使用v-show替代：代码不够优雅，该渲染的还是渲染了，只是没有显示</li>
                <li>使用计算属性，直接循环加工好的数组：代码稍显复杂</li>
                <li>在Vue-Cli中，可以嵌套&lt;template>标签，该标签知识逻辑标签，不会实际渲染到页面上，所以可以在template标签上进行判断</li>
            </ol>
        </li>
        <li>
            <h3>推荐给v-for生成的标签，绑定key属性</h3>
            <p>这是为了方便，diff运算时，判断应该在现有节点更新，还是创建新结点。key要求值唯一</p>
            <h4>key推荐的绑定方案</h4>
            <ol>
                <li>采用对象的唯一标识：item.id</li>
                <li>采用对象本身：item</li>
            </ol>
            <p>不推荐绑定遍历的索引：更新时会出现一些错误</p>
        </li>
        
    </ul>
    <h2>Vue的虚拟节点</h2>
    <p>数据是动态绑定的，节点是动态渲染的，但是数据改变或者节点变化，不是直接作用到DOM树上。是先在虚拟节点中进行运算，最后统一更新DOM树，以减少页面回流和重绘次数。</p>
    <p>diff运算，差值运算：不重复创建节点，而是尽量将老节点进行更新，以减少创建节点的数量，提高效率。</p>
    <main id="app">
        <h2>女生表格</h2>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>电话</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,idx) in girls" :key="item.id">
                    <td>{{idx + 1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex == '1' ? "男" : "女"}}</td>
                    <td>{{item.tel}}</td>
                </tr>
            </tbody>
        </table>
    </main>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                arr: [
                    {id:1, name: "奉先", sex: 1, tel: "13547811112" },
                    {id:2, name: "龙雪", sex: 2, tel: "13547811113" },
                    {id:3, name: "陈科地", sex: 1, tel: "13547811114" },
                    {id:4, name: "曾颖萍", sex: 2, tel: "13547811115" },
                ]
            }
        },
        computed: {
            girls() {
                return this.arr.filter(v => v.sex == 2);
            }
        }
    })
</script>

</html>